<template>
    <div style="overflow: hidden;height: 1100px;width: 100%;">
        <van-nav-bar title="视频问诊" left-text="" left-arrow @click="onClickLeft" />
        <div>
            <div>
                <div style="width: 99%;height: 170px; ">
                    <!-- 顶部通知栏 -->
                    <van-notice-bar>重要：急重症不适合网上咨询，请立即前往当地医院就诊</van-notice-bar>
                    <div class="files">
                        <h3>选择档案</h3> <span class="filesadd" @click="Toflilesadd">+新建档案</span>
                        <van-swipe :loop="false" class="swipe" :width="205" :show-indicators="false">
                            <div v-for="(item, index) in list" :key="index" class="filess">
                                <van-swipe-item>
                                    <div class="file" :class="active === index ? 'active' : ''" @click="ToIndex(index)">
                                        <span style="width: 100px;height: 20px;line-height: 38px;padding-left: 5px;"> {{
                                            item.name }}</span> <br>
                                        <span>{{ item.sex }}
                                            <span>{{
                                                item.title }} <span>{{ item.age }}岁 </span></span>
                                        </span>
                                    </div>
                                </van-swipe-item>
                            </div>
                        </van-swipe>
                        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '40%' }">
                            <h3 style="position: absolute;top: 15px;left: 15px;">新建档案</h3> <span><img
                                    src="../../assets/img/guanbi.png" alt=""
                                    style="position: absolute;right: 15px;top: 15px;width: 20px;height: 20px;"></span>
                            <div class="Todoc">
                                <p>
                                    <van-field v-model="AddPerson.name" is-link readonly label="姓名" @click="showPopup">
                                        <template #input>
                                            <span>{{ AddPerson.name }}</span>
                                        </template>
                                    </van-field>
                                    <van-popup v-model:show="showsss" position="bottom" :style="{ height: '30%' }">
                                        <div v-for="(item, index) in list" :key="index" @click="handleClick(item)">
                                            <div style="line-height: 40px;text-align: center;">
                                                <p style="margin-top: 20px;" ref=""> {{ item.name }}</p>
                                            </div>
                                        </div>
                                    </van-popup>
                                </p>
                                <p>
                                    <van-field v-model="AddPerson.title" is-link clearable readonly label="关系"
                                        placeholder="选择关系" :clickable="true" @click="showPickera = true"
                                        style="width: 100%" />
                                    <van-popup v-model:show="showPickera" destroy-on-close round position="bottom">
                                        <van-picker :model-value="pickerValuea" :columns="columns"
                                            @cancel="showPickera = false" @confirm="onConfirma"
                                            style="height: 400px;line-height: 40px;" />
                                    </van-popup>

                                </p>
                                <p>
                                    <van-field v-model="fieldValue" is-link readonly label="出生日期" @click="showPopupss">
                                        <template #input>
                                            <span>{{ AddPerson.time }}</span>
                                        </template>
                                    </van-field>
                                    <van-popup v-model:show="shows" position="bottom" :style="{ height: '30%' }">
                                        <div v-for="(item, index) in list" :key="index" @click="handleClicks(item)">
                                            <div style="line-height: 40px;text-align: center;">
                                                <p style="margin-top: 20px;" ref=""> {{ item.time }}</p>
                                            </div>
                                        </div>
                                    </van-popup>
                                </p>
                            </div>
                            <button class="Person-btn" @click="handleadd">确定</button>
                        </van-popup>
                    </div>
                </div>
                <div class="handlebottom">

                </div>
                <div class="handleUpdated">
                    <h3>描述病情</h3>
                    <textarea v-model="text" name="" id="" cols="50" rows="10" class="handleText"
                        style="text-align: center;"></textarea>
                    <h4 class="HandleTxt">上传检查单/患处照片(最多可用九张)</h4>
                    <div class="HandleImg">
                        <div style="width: 400px;">
                            <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="9"
                                style="overflow-y: scroll;" class="Handleimgss" />
                            <img :src="imgs" alt="" style="width: 80px;height: 80px;">
                        </div>
                    </div>
                </div>
                <div class="handlebottom">

                </div>
                <div>
                    <p>
                        <van-field v-model="AddPerson.time" is-link readonly label="预约日期" @click="showPopupss">
                            <template #input>
                                <span>{{ AddPerson.time }}</span>
                            </template>
                        </van-field>
                        <van-popup v-model:show="shows" position="bottom" :style="{ height: '30%' }">
                            <div v-for="(item, index) in list" :key="index" @click="handleClicks(item)">
                                <div style="line-height: 40px;text-align: center;">
                                    <p style="margin-top: 20px;" ref=""> {{ item.time }}</p>
                                </div>
                            </div>
                        </van-popup>
                    </p>
                </div>
                <div class="handlebottom">

                </div>
                <div class="HandleService">
                    <p>
                    <h4>服务类型</h4>
                    <div class="HandlePrice">
                        <span class="prices" @click="ToIndexs(index)">￥139次(10分钟)</span>
                        <span class="pricess" @click="ToIndexs(index)">￥288次(10分钟)</span>
                        <span class="pricesss" @click="ToIndexs(index)">￥198次(15分钟)</span>
                        <span class="pricessss" @click="ToIndexs(index)">￥498次(60分钟)</span>
                    </div>
                    </p>
                </div>
                <div class="handlebottom">

                </div>
                <div style="width: 99%;">
                    <p>
                        <van-field v-model="AddPerson.phone" is-link readonly label="联系电话：" @click="showPopupsss">
                            <template #input>
                                <span>{{ AddPerson.phone }}</span>
                            </template>
                        </van-field>
                        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
                            <div v-for="(item, index) in list" :key="index" @click="handlePhone(item)">
                                <div style="line-height: 40px;text-align: center;">
                                    <p style="margin-top: 20px;" ref=""> {{ item.phone }}</p>
                                </div>
                            </div>
                        </van-popup>
                    </p>
                </div>
                <div style="width: 99%;height: 300px;background-color: #f7f7f7;">
                    <p style=" margin-left: 14px;font-size: 15.5px;">买前必读</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">1.服务流程:预约成功后,医生将在到达预约时间前3分钟左</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">右发起视频，请提前至订单详情页面等待</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">2. 因医生工作繁忙,可能更改预约时间,届时会第一时间通</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">知您</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">3. 为保证视频问诊效率,建议您事先准备好病情资料(如检</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">查、患处照片)</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">4. 如视频失败,本次咨询不收取费用,如视频过程中意外中</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">断，可在规定时间内继续重连</p>
                    <p style=" margin-left: 14px;font-size: 15.5px;">5. 视频通话期间，请确保网络通畅，等待医生来电</p>
                </div>
            </div>
            <div style="width: 100%;height: 60px;background-color: white;position: fixed;left:0px;bottom: 2px;">
                <button
                    style="width: 80%;height: 50px;background-color:#39d167;border: none;
        outline: none;color: white;position: fixed;left: 40px;border-bottom: 0px;font-size: 18px;font-weight: 900;bottom: 2px;"
                    @click="HandleOrder">去支付</button>
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
const list = ref([])
const index = ref(0)
const router = useRouter()
const showBottom = ref(false);
const showBottom1 = ref(false);
const active = ref(0)
const active1 = ref(0)
const showPickera = ref(false)
const pickerValuea = ref<any>([])
const show = ref(false);
const AgeYears = ref<any>('');
const fileList = ref([]);
const AddPerson = ref<any>({
    title: '',
    name: '',
    time: '',
    phone: '',
    age: ''
})
const fieldValue = ref<any>('')
const shows = ref(false);
const showsss = ref(false);
const text = ref('请使用10-500字描述具体症状,患病时长,用药情况,需要医生提供那些帮助等,以便医生更好的帮助您解决问题。')
const columns = [
    { text: '自己', value: '自己' },
    { text: '父母', value: '父母' },
    { text: '子女', value: '子女' },
    { text: '爱人', value: '爱人' },
    { text: '其他', value: '其他' }
]
const ToIndexs = (index: any) => {
    active1.value = index
}

//返回按钮的点击事件
const onClickLeft = () => {
    router.go(-1)
}
const HandleOrder = () => {
    router.push('/Handleorder')

}
const showPopupss = () => {
    shows.value = true
}
const showPopupsss = () => {
    showsss.value = true
}
//active的切换方法
const ToIndex = (index: any) => {
    active.value = index
}
const handlePhone = (item: any) => {
    console.log(item.phone);
    AddPerson.value.phone = item.phone
}
//档案接口
const getlist = async () => {
    await axios.get('/addres/ChunYuperson').then(res => {
        console.log(res)
        list.value = res.data.data
        console.log(list.value)
    }).catch(err => {
        console.log(err)
    })
}
getlist()
const Toflilesadd = () => {
    showBottom.value = true

}
//新建档案
const onConfirma = ({ selectedValues, selectedOptions }) => {
    showPickera.value = false
    pickerValuea.value = selectedValues
    AddPerson.value.title = selectedOptions[0].text
    console.log(AddPerson.value.title);

}
// 获取到接口的名字
const handleClick = (item: any) => {
    console.log(item.name);
    AddPerson.value.name = item.name
}
//弹出层的关闭
const showPopup = () => {
    showsss.value = true;
};
//计算年龄
const handleClicks = (item: any) => {
    console.log(item.time);
    const date = new Date();
    const year = date.getFullYear();
    AddPerson.value.time = item.time;
    AgeYears.value = AddPerson.value.time.slice(0, 4);
    console.log(year - AgeYears.value);
    AddPerson.value.age = year - AgeYears.value;
}
const imgs = ref<any>('')
//新建档案的确定按钮事件
const handleadd = async () => {
    console.log(AddPerson.value);
    await axios.post('/addres/ChunYupersonAdd', AddPerson.value).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}
const afterRead = (file: any) => {
    // console.log(file.content);
    imgs.value = file.content


}
</script>

<style lang="scss" scoped>
.van-notice-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--van-notice-bar-height);
    padding: var(--van-notice-bar-padding);
    color: #fec049;
    font-size: var(--van-notice-bar-font-size);
    line-height: var(--van-notice-bar-line-height);
    background: var(--van-notice-bar-background);
}

.files {
    position: relative;

    h3 {
        position: absolute;
        left: 15px;
    }

    .filesadd {
        position: absolute;
        right: 15px;
        color: #70de92;
        z-index: 999;

    }
}

.file {
    margin-top: 30px;
    margin-left: 20px;
    display: inline-block;
    float: left;
    width: 130px;
    height: 65px;
    background-color: #f7f7f7;
}

.active {
    border: 1px solid #70de92;
}

.active1 {
    border: 1px solid #70de92;
}

.Todoc {
    position: absolute;
    top: 45px;
    left: 18px;

    p {
        margin-top: 10px;
        width: 99%;
        height: 40px;
        // background-color: red;
        border-bottom: 1px solid #ececec;

        input {
            width: 140px;
            height: 30px;
            border: none;
            outline: none;
            background-color: #ffff;
            position: absolute;
            top: 5px;
        }
    }
}

:deep(.van-field__control) {
    display: block;
    box-sizing: border-box;
    width: 99%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--van-field-input-text-color);
    line-height: inherit;
    text-align: right;
    background-color: transparent;
    border: 0;
    resize: none;
    -webkit-user-select: auto;
    user-select: auto;
}

.Person-btn {
    width: 95%;
    height: 50px;
    background-color: #39d167;
    position: absolute;
    bottom: 10px;
    left: 2%;
    border-radius: 25px;
    border: none;
    outline: none;
    color: #fff;
}

.swipe {
    width: 500px;
}

.handlebottom {
    width: 100%;
    height: 15px;
    background-color: #f7f7f7;
}

.handleUpdated {
    width: 100%;
    height: 300px;
    position: relative;

    h3 {
        position: absolute;
        left: 15px;
    }

    .HandleTxt {
        position: absolute;
        left: 15px;
        top: 170px;
        color: #4f4f4f;
        font-weight: normal;
    }
}

.handleText {
    position: absolute;
    top: 30px;
    width: 98%;
    height: 130px;
    border: none;
    outline: none;
    left: 1px;
    text-indent: 10px;
}

.HandleImg {
    position: absolute;
    top: 200px;
    left: 18px;
}

.Handleimgss {
    position: absolute;
    left: 100px;
}

.HandleService {
    width: 99%;
    height: 150px;
    position: relative;

    h4 {
        position: absolute;
        left: 15px;
    }
}

.HandlePrice {
    position: absolute;
    top: 50px;
    width: 99%;
    height: 100px;

    // background-color: red;
    .prices {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 188px;
        height: 30px;
        background-color: white;
        text-align: center;
        border: 3px solid #39d167;
        ;
    }

    .pricess {
        position: absolute;
        top: 50px;
        left: 10px;
        width: 188px;
        height: 30px;
        background-color: white;
        text-align: center;
        border: 3px solid #ececec;
        ;

    }

    .pricesss {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 188px;
        height: 30px;
        background-color: white;
        text-align: center;
        border: 3px solid #ececec;
        ;
    }

    .pricessss {
        position: absolute;
        top: 50px;
        right: 10px;
        width: 188px;
        height: 30px;
        background-color: white;
        text-align: center;
        border: 3px solid #ececec;
        ;
    }
}
</style>